<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
</head>

<body>
    <p>歌曲名称：<span class="title"></span></p>
    <button class="pre">上一曲</button>
    <button class="btn1">play</button>
    <button class="next">下一曲</button>
    <button class="btn2">🔇</button>
    <audio class="audio" src=""></audio>
    <script>
        var songList = [
            { title: '情非得已', url: 'song1.mp3', art: '庾澄庆' },
            { title: '屋顶', url: 'song2.mp3', art: '周杰伦' }
        ]
        var audio = document.querySelector('.audio')
        var btn1 = document.querySelector('.btn1') // 播放、暂停
        var btn2 = document.querySelector('.btn2') // 静音
        var pre = document.querySelector('.pre') // 上一曲
        var next = document.querySelector('.next') // 下一曲
        var title = document.querySelector('.title') // 歌曲名
        var index = -1; // 歌曲的序号
        btn1.onclick = function () {
            // 点击按钮切换播放状态
            if (audio.paused) { // 暂停
                audio.play();
                btn1.innerHTML = '暂停'
            } else {
                audio.pause();
                btn1.innerHTML = '播放'
            }

        }
        // 静音
        btn2.onclick = function () {
            audio.muted = !audio.muted
        }
        // 下一首
        next.onclick = function () {
            index++;
            console.log(songList[index]);
            audio.src = songList[index].url;
            title.innerHTML = songList[index].title;
        }
        // 上一首
        pre.onclick = function () {
            index--;
            console.log(songList[index]);
            audio.src = songList[index].url;
            title.innerHTML = songList[index].title;
        }
    </script>
</body>

</html>